<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/'';
        //ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/
	</script>
	<title>房源详情查看</title>
	<!--<meta name="keywords" content="麒邻（KeyLink）公寓租房,深圳租房,深圳租房网,租房网">
	<meta name="description" content="深圳麒邻（KeyLink）公寓整租一居，租金5000元/月，地址：笋岗东路2123号。深圳租房信息，尽在租房网。海量长租公寓直租房源，拎包入住，零中介费。">-->
	<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
	<link rel="stylesheet" type="text/css" href="/css/pc/client/common.css">
	<link rel="stylesheet" type="text/css" href="/libs/Swiper-master/dist/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="/css/pc/client/apart2.css">
</head>
<style>
	.info-box{
		line-height: 1;
		font-family:
	}
	.info-box .info-label{
		border-bottom:1px solid #eee;
	}
	.info-box .info-label span{
		display: inline-block;
		margin:18px 0;
	}
	.info-box .info-label label{
		position: relative;
		bottom:10px;
		left:10px;
	}
	.info-box .form-item{
		position: relative;
		margin-top:18px;
	}
	.info-box .form-item input{
		width:100%;
		outline: none;
	}
	.info-box .form-item input[type=text]{
		padding: 16px 0;
		background-color: #ffffff;
		text-indent: 20px;
		border:1px solid #d8d8d8;

	}
	.info-box .form-item a{
		display: block;
		text-align: center;
	}
	.info-box .form-item input[type=submit],.info-box .form-item a{
		background-image: -webkit-linear-gradient(30deg, #f13c4d 0%, #f13c4d 0%, #f44d51 60%, #f75e54 77%, #f75e54 89%, #f65e54 100%);
		background-image: -o-linear-gradient(30deg, #f13c4d 0%, #f13c4d 0%, #f44d51 60%, #f75e54 77%, #f75e54 89%, #f65e54 100%);
		background-image: linear-gradient(120deg, #f13c4d 0%, #f13c4d 0%, #f44d51 60%, #f75e54 77%, #f75e54 89%, #f65e54 100%);
		font-size: 16px;
		color: #fff;
		border-radius: 4px;
		height: 52px;
		line-height: 52px;
		cursor: pointer;
	}
	.info-box .form-item input[type=submit]:hover{
		opacity: 0.9;
	}
	.info-box .form-item a:hover{
		opacity: 0.9;
	}
	.info-box .info-i{
		padding: 25px 19px;
	}
	.info-box .info-i b{
		font-size: 16px;
		margin-left: 14px;
		position: relative;
		bottom: 3px;
		font-weight: 500;
	}
	.info-box .info-i i{
		margin-left: 8px;
		font-style: normal;
		color: #999;
		position: relative;
		bottom: 4px;
		font-size: 12px;
	}
	.info-box .form-item span{
		position: absolute;
		right: 7px;
		top: 9px;
		height: 32px;
		line-height: 32px;
		padding: 0 12px;
	}
	.near-ppt{
		position: absolute;
		top: 10px;
		right: 312px;
		width: 80px;
		height: 30px;
		line-height: 30px;
		z-index: 99;
		background-color: rgba(0,0,0,0.6);
		color: #fff !important;
		text-align: center;
	}
	.near-ppt:hover{
		background-color: rgba(255,85,85,0.6);
	}
	.swiper-button-prev,.swiper-button-next{
		top: 8%;
		width: 50px !important;
		height: 450px !important;
	}
	.propertyNum-box{
		position: relative;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
		overflow: hidden;
	}
	.propertyNum-box .img-box a{
		display: inline-block;
	}
	.propertyNum-box .propertyNum-info .title a:hover{
		color: #3399cc;
	}
	.propertyNum-box .img-box{
		position: relative;
		width: 180px;
		height: 120px;
		overflow: hidden;
		float: left;
		margin: 16px;
	}
	.propertyNum-box .propertyNum-info{
		display: inline-block;
		margin-top: 16px;
		font-size: 14px;
		color: #999999;
	}
	.propertyNum-box .propertyNum-info p{
		margin-bottom: 10px;
	}
	.propertyNum-box .propertyNum-info .title{
		font-size: 18px;
		color: #666;
	}
	.info .region:hover,.info .title:hover{
		text-decoration: underline;
	}
	.msg-group{
		margin-top: 10px;
		text-align: center;
		color: #999;
		display: none;
	}
	.page-apart .appoint-box .label-group span:not(:only-child):last-child {
		margin-left: -4px;
	}
</style>
<!--[if lte IE 9]>
<style>
	.info-box .form-item input[type=submit], .info-box .form-item a{
		background:#ff5555;
	}
	.page-apart .recommended-box .swiper-slide{
		margin-right:20px;
	}
</style>
<![endif]-->
<body class="page-apart" data-id="24842" data-mobile="" lng="114.117036" lat="22.561145" data-status="">
<input type="hidden" th:value="${session.username}" name="username" id="username">
<input type="hidden" th:value="${id}" name="id" id="id">
<div class="header">
	<div class="nav-wrap">
		<div class="logo">
			<a rel="nofollow" href="#">
				<img src="/img/pc/client/home/logo.png" height="32" alt="租房网">
			</a>
		</div>
		<div class="city-wrap" style="cursor: default;">
			<span th:text="${cityName}"></span><i></i>
			<ul>
                    <span th:each="retAddress,status:${retAddressList}">
                        <span th:if="${retAddress.cityName} != ${cityName}">
                            <li><a rel="nofollow" th:href="@{/retAddress/index(id=${retAddress.id})}" th:text="${retAddress.cityName}"></a></li>
                        </span>
                    </span>
			</ul>
			<!-- <span>[<a rel="nofollow" href="https://www.zufun.cn/index" class="link" target="_blank">切换城市</a>]</span> -->
		</div>
		<div class="nav-items">
			<div class="nav-item">
				<a rel="nofollow" th:href="@{/retAddress/index}" class="">首页</a>
			</div>

			<div class="nav-item">
				<a th:href="@{/retAddress/searchList}" class="on">租房</a>
			</div>

			<div class="nav-item">
				<a rel="nofollow" href="https://www.zufun.cn/platform" target="_blank">物业平台</a>
			</div>
			<div class="nav-item user-down-wrap" id="login_holder">
				<a href="#loginModal" rel="nofollow" data-toggle="modal" data-target="#loginModal" >注册/登录</a>
			</div>
		</div>
	</div>
</div>	<div class="wrapper">
	<div class="wrapper-header" id="tiao">



	</div>
	<div class="main">
		<section class="slide-box">
			<div class="swiper-container gallery-top" id="tet">
				<!-- Add Arrows -->
				<div class="swiper-button-next">
					<i class="icon  icon-arrow-right-w-m" style="position: relative;left: 16px;top:200px;"></i>
				</div>
				<div class="swiper-button-prev">
					<i class="icon  icon-arrow-left-w-m" style="position: relative;left: 16px;top:200px;"></i>
				</div>
			</div>
			<div class="swiper-container gallery-thumbs" id="xiakuan">

			</div>
			<div class="thumbs-next"><i class="icon-arrow-right-w-s icon"></i></div>
			<div class="thumbs-prev"><i class="icon-arrow-left-w-s icon"></i></div>
		</section>
		<!-- /slide-box -->
		<section class="description-box">
			<h3 class="section-title">房源描述</h3>
			<div class="section-content">
				<span th:each="retRentalInformation,status:${retRentalInformationList}">
				<p th:text="${retRentalInformation.ret_describe}"></p>
					</span>
			</div>
		</section>
		<!-- /description-box -->
		<section class="facilities-box">
			<h3 class="section-title">配套设施</h3>
			<ul class="content">

				<li>
					<i class="icon icon-bed"></i>
					<p>床</p>
				</li>

				<li>
					<i class="icon icon-kitchen"></i>
					<p>厨房</p>
				</li>

				<li>
					<i class="icon icon-heater"></i>
					<p>热水器</p>
				</li>

				<li>
					<i class="icon icon-air"></i>
					<p>空调</p>
				</li>

				<li>
					<i class="icon icon-wifi"></i>
					<p>网络</p>
				</li>

				<li>
					<i class="icon icon-tv"></i>
					<p>电视</p>
				</li>

				<li>
					<i class="icon icon-fridge"></i>
					<p>冰箱</p>
				</li>

				<li>
					<i class="icon icon-washer"></i>
					<p>洗衣机</p>
				</li>

				<li>
					<i class="icon icon-wardrobe"></i>
					<p>衣柜</p>
				</li>

				<li>
					<i class="icon icon-elevator"></i>
					<p>电梯</p>
				</li>
			</ul>
		</section>
		<!-- /facilities-box -->
	</div>
	<!-- /main -->
	<div class="aside">
		<section class="appoint-box">
			<span th:each="retRentalInformation,status:${retRentalInformationList}">
				<h1 class="title"><span th:text="${retRentalInformation.lease_out}"></span>&nbsp;&nbsp;<span th:text="${retRentalInformation.huxing_type}"></span><span th:text="${retRentalInformation.ret_wei}+'居'"></span></h1>
			<div class="addr">
				<a href="#" class="link" target="_blank" th:text="${retRentalInformation.ch_cityName}"></a>&nbsp;-&nbsp;<a href="#" class="link" target="_blank" th:text="${retRentalInformation.cityName}"></a><div class="price"><span class="text-orange" th:text="${retRentalInformation.money}"></span><span class="text-gray">元/月</span></div>
			</div>

			<div class="label-group">
				<span>公寓直租</span><span>近地铁</span>									</div>
			<div class="detail-box">
				<ul>
					<li class="col-md-6">
						<span>户型</span>
						<span><span th:text="${retRentalInformation.ret_shi}+'室'"></span><span th:text="${retRentalInformation.ret_ting}+'厅'"></span><span th:text="${retRentalInformation.ret_wei}+'卫'"></span></span>						</li>
					<li class="col-md-6">
						<span>面积</span>
						<span th:text="${retRentalInformation.measure}+'m²'"></span>								</li>
					<li class="col-md-6">
						<span>楼层</span>
						<span th:text="${retRentalInformation.ret_fanjianshu}+'层'"></span>					</li>
					<li class="col-md-6">
						<span>租期</span>
						<span th:text="${retRentalInformation.house_type}"></span>						</li>
					<li class="col-md-6">
						<span>支付</span>
						<span th:text="${retRentalInformation.payment}"></span>							</li>
					<li class="col-md-12">
						<span>交通</span>
						<span th:text="${retRentalInformation.ret_jiaoton}"></span>							</li>
				</ul>
			</div>
				</span>
		</section>
		<!-- appoint-box -->
		<section class="property-box">
		</section>
		<section class="info-box yinchang">
			<form class="info-form pic-form layui-form" id="userAppointForm3">
				<div class="form-item">
					<input type="text" id="shouji" lay-verify="required" name="fu_mobile" placeholder="手机号">
				</div>
				<div class="form-item">
					<input type="text" id="yanzen" lay-verify="required"  name="vcode" placeholder="短信验证码">
					<span class="sms-button sms-button-error" id="huoqu1">获取验证码</span>
					<p class="msg-group">收不到验证码？联系客服：1314-735-9870</p>
				</div>
				<div class="layui-form-item form-group form-item" style="margin-bottom: 18px;">
					<div class="button-group" style="position:relative;">
						<button class="layui-btn layui-block btn-disabled" lay-filter="logins2" lay-submit="" type="button">预约看房</button>
					</div>
				</div>
			</form>
		</section>
		<section class="info-box test" style="display: none">
			<form class="info-form pic-form layui-form" id="userAppointForm31">
				<div class="layui-form-item form-group form-item" style="margin-bottom: 18px;">
					<div class="button-group" style="position:relative;">
						<button class="layui-btn layui-block btn-disabled" lay-filter="logins3" lay-submit="" type="button">预约看房</button>
					</div>
				</div>
			</form>
		</section>
		<section class="propertyNum-box">
			<span th:each="retRentalInformation,status:${retRentalInformationList}">
			<div class="img-box">
				<a  href="#">
					<img th:src="${retRentalInformation.ret_picture}">
				</a>
			</div>
			<div class="propertyNum-info">
				<p class="title">
					<a  href="#" th:text="${retRentalInformation.house_type}"></a>
				</p>
				<p><span class="text-orange" th:text="${retRentalInformation.money}+'元/月'"></span></p>
				<p>该公寓近7天有12人预约看房</p>
				<p>预约后管家会尽快与您联系</p>
			</div>
			</span>
		</section>
	</div>
	<!-- /aside -->
	<section class="map-box">
		<h3 class="section-title">
			周边信息
			<ul class="tab-bar" role="tablist">
				<li class="tab"  role="presentation">
					<a href="#transportContent" id="transportTab" aria-controls="transportContent" role="tab" data-toggle="tab" data-key="交通">
						<span>交通</span>
						<i></i>
					</a>
				</li>
				<li class="tab"  role="presentation">
					<a href="#foodContent" aria-controls="foodContent" role="tab" data-toggle="tab"  data-key="餐饮">
						<span>餐饮</span>
						<i></i>
					</a>
				</li>
				<li class="tab"  role="presentation">
					<a href="#shoppingContent" aria-controls="shoppingContent" role="tab" data-toggle="tab"  data-key="购物">
						<span>购物</span>
						<i></i>
					</a>
				</li>
				<li class="tab" role="presentation">
					<a href="#bankContent" aria-controls="bankContent" role="tab" data-toggle="tab"  data-key="教育">
						<span>教育</span>
						<i></i>
					</a>
				</li>
			</ul>
		</h3>
		<div class="section-content">
			<div class="map-container" id="mapContainer"></div>
			<a href="/map/keyword=%E9%BA%92%E9%82%BB%EF%BC%88KeyLink%EF%BC%89%E5%85%AC%E5%AF%93" target="_blank" class="near-ppt">周边房源</a>
			<div class="tab-content">
				<ul role="tabpanel" class="tab-panel" id="transportContent">

				</ul>
				<ul role="tabpanel" class="tab-panel" id="foodContent">

				</ul>
				<ul role="tabpanel" class="tab-panel" id="shoppingContent">

				</ul>
				<ul role="tabpanel" class="tab-panel" id="bankContent">

				</ul>
			</div>
		</div>
	</section>
	<!-- /map-box -->
	<section class="recommended-box">
		<h3 class="section-title">猜你喜欢</h3>
		<div class="section-content">
			<div class="swiper-container" id="recommendedContainer">

			</div>
			<!-- Add Arrows -->
			<div class="icon icon-arrow-left-s"></div>
			<div class="icon icon-arrow-right-s"></div>
		</div>
	</section>
	<!-- /recommended -->
</div>
<div class="modal in" id="picCodeModal" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
	<div class="modal-backdrop  in"></div>
	<div class="modal-dialog-appoint user-dialog" role="document">
		<div class="modal-content ">
			<div class="modal-header">
				<h4 class="modal-title">图形验证码</h4>
				<button type="button" class="close"><span aria-hidden="true">×</span></button>
			</div>
			<div class="modal-body">
				<form class="layui-form pic-form" id="picCodeForm">
					<div class="form-group pic-form">
						<div class="input-group">
							<input type="text" lay-verify="required|captcha" class="not-post layui-input" name="pic_code" placeholder="验证码">
							<div class="pic-wrap"><div class="img ok-none-select" id="captchaImg1"></div></div>
						</div>
					</div>
					<div class="form-group">
						<div class="button-group">
							<button class="layui-btn layui-block" lay-filter="login" lay-submit="" type="button">确定</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<div class="pic-bounce" style="z-index:999">
	<a class="close">
		<img src="/img/windows_close.png">
	</a>
	<div class="pic-show" id="nhao">




	</div>
	<div class="btn-left">
		<i class="btn-icon">
			<img src="/img/windows_left.png">
		</i>
	</div>
	<div class="btn-right">
		<i class="btn-icon">
			<img src="/img/windows_right.png">
		</i>
	</div>
</div>
<!-- /buldings -->
<div style="clear:both"></div>
<div class="new-footer" style="margin-top:20px;">
	<div class="site-zufun">
		<div class="site-info">
			<p>
				<a rel="nofollow" href="https://www.zufun.cn/about" target="_blank">关于我们</a><span>|</span>
				<a rel="nofollow" href="https://www.zufun.cn/question" target="_blank">常见问题</a><span>|</span>
				<a rel="nofollow" href="https://www.zufun.cn/business" target="_blank">商务合作</a><span>|</span>
				<a rel="nofollow" href="https://www.zufun.cn/job" target="_blank">招聘信息</a><span>|</span>
				<a rel="nofollow" href="https://www.zufun.cn/protocol" target="_blank">服务声明</a><span>|</span>
				<a rel="nofollow" href="javascript:void(0);" onclick="suggest();">意见反馈</a><span>|</span>
				<a rel="nofollow" href="/sitemap" target="_blank">网站地图</a>
			</p>
			<div class="call-us">
				<div class="qrcode-wrap">
					<span style="display: block;line-height: 1.3;white-space: nowrap;letter-spacing:2px;position: absolute;right:-30px;top: 17px;color:#999;">下载APP</span>
					<i class="icon icon-mobile" style="position:relative;right:60px;"></i>
					<i class="icon icon-app-qrcode qrcode" style="left:-102px;"></i>
				</div>
				<div class="qrcode-wrap">
					<span style="display: block;line-height: 1.3;white-space: nowrap;letter-spacing:2px;position: absolute;left:30px;top: 17px;color:#999;">关注公众号</span>
					<i class="icon icon-weixin"></i>
					<i class="icon icon-weixin-qrcode qrcode"></i>
				</div>
			</div>
		</div>
		<div class="site-copyright" style="text-align:left;">
			<p>©2015-2020 深圳易找房信息技术有限公司&nbsp;&nbsp;版权所有&nbsp;&nbsp;<a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">粤ICP备15073386号</a></p>
			<span class="hotline" style="position: absolute;top: 30px;right: 0;font-size: 14px;">服务热线：132-6682-1881（9:00 - 18:00）</span>
		</div>
	</div>
</div>
<script id="suggest_tpl" type="text/html">
	<form id="suggest_form">
		<div class="form-group">
			<div class="textarea-group">
				<label>反馈内容</label>
				<textarea name="content" placeholder="欢迎提出您在使用过程中遇到的问题或宝贵建议，感谢您的支持。"></textarea>
			</div>
			<div class="input-group" style="height:100px;">
				<label>联系方式</label>
				<input type="text" name="email" placeholder="请留下您的手机或邮箱" style="margin-top:5px;" value="{{fu_mobile}}">
			</div>
			<div class="button-group">
				<input type="submit" value="提交反馈">
			</div>
		</div>
	</form>
</script>
<!-- /forgetModal -->
<div class="modal" id="loginModal" tabindex="-1" role="dialog">
	<div class="modal-dialog-login user-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<ul class="modal-tab tab-bar" role="tablist">
					<li class="tab active"  role="presentation" style="margin: 0;">
						<a href="#quickLoginContent"  aria-controls="transportContent" role="tab" data-toggle="tab">手机验证码登录</a>
					</li>
					<li class="tab"  role="presentation" style="margin: 0;">
						<a href="#loginContent"  aria-controls="transportContent" role="tab" data-toggle="tab" >账号密码登录</a>
					</li>
				</ul>
			</div>
			<div class="modal-body">
				<div class="tab-content">
					<div role="tabpanel" class="tab-panel active" id="quickLoginContent">
						<form class="layui-form pic-form" id="quickLoginForm" style="position: relative; width: 100%; min-height: 224px; overflow: hidden;" novalidate="novalidate">
							<div id="mod_register" class="diyi" style="position: absolute; top: 0; bottom: 0; margin: auto 0; left: 0px; width: 100%; height: fit-content;">
								<div class="form-group">
									<div class="input-group">
										<input type="text" id="phone" lay-verify="required" name="fu_mobile" placeholder="手机" class="layui-input">
									</div>
								</div>
								<div class="form-group">
									<div class="input-group">
										<input type="text" id="vcode" name="vcode" placeholder="短信验证码">
										<span class="sms-button sms-button-error layui-input" id="huoqu" >获取验证码</span>
									</div>
								</div>
								<div class="form-group" style="margin-top: -10px !important; margin-bottom: 15px !important; color: #999; padding-left: 40px;">未注册将自动创建账号</div>
								<div class="layui-form-item form-group" style="margin-top:0;">
									<div class="button-group" style="position:relative;">
										<button class="layui-btn layui-block btn-disabled" lay-filter="logins" lay-submit="" type="button">登录</button>
									</div>
								</div>
							</div>
							<div id="mod_register_validate" class="dier" style="position: absolute; top: 0; bottom: 0; margin: auto 0; left: 400px; width: 100%; height: fit-content;">
								<div class="form-group pic-form" id="haizhi" style="display: none">
									<div class="input-group">
										<input type="text" lay-verify="required|captcha" class="not-post layui-input" name="pic_code" placeholder="验证码">
										<div class="pic-wrap"><div class="img ok-none-select" id="captchaImg"></div></div>
									</div>
								</div>
								<div class="layui-form-item form-group" style="margin-top:0;">
									<div class="button-group" style="position:relative;">
										<button class="layui-btn layui-block" lay-filter="login" lay-submit="" type="button">登录</button>
									</div>
								</div>
							</div>
						</form>
					</div>
					<div role="tabpanel" class="tab-panel" id="loginContent" style="margin-top:30px;">
						<form class="layui-form pic-form" id="loginForm">
							<div class="form-group">
								<div class="input-group">
									<input type="text" id="fu_mobile" lay-verify="required" name="fu_mobile" placeholder="手机">
								</div>
							</div>
							<div class="form-group">
								<div class="input-group">
									<input type="password" lay-verify="required" name="fu_password" placeholder="密码">
								</div>
							</div>
							<div class="layui-form-item form-group" style="margin-top:0;">
								<div class="button-group" style="position:relative;">
									<button class="layui-btn layui-block btn-disabled" lay-filter="logins1" lay-submit="" type="button">登录</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="/common/js/jquery-1.11.3.min.js"></script>
<script src="/libs/yzf/modules/yzf.tab.js"></script>
<script src="/libs/yzf/modules/yzf.modal.js"></script>
<script src="/libs/yzf/modules/yzf.button.js"></script>
<!--[if !IE]> -->
<!-- <![endif]-->
<!--[if gte IE 9]>

<![endif]-->
<!--[if lte IE 8]>
<script src="/common/js/jquery.cookie.js"></script>
<script src="/common/js/artForm.js"></script>
<script src="/common/js/md5.js"></script>
<script src="/common/js/base.js"></script>
<script src="/common/js/validateConfig.js"></script>
<script src="/common/js/jquery.validate.js"></script>
<script src="/js/pc/client/loginAndRegist2.js"></script>
<script src="/libs/artdialog/dist/dialog-min.js"></script>
<script src="/common/js/template.js"></script>
<script src="/common/js/jquery.lazyload.min.js"></script>
<![endif]-->
<!--[if lt IE 8]>
<script src="/libs/JSON-js-master/json2.js"></script>
<![endif]-->
<!--[if lt IE 10]>
<script src="/common/js/normalize.js"></script>
<![endif]-->
<script src="/js/pc/client/apart2.js"></script>
<!--[if !IE]> -->
<script src="/js/pc/client/swiper-3.4.2.min.js"></script>
<!-- <![endif]-->
<!--[if gte IE 10]>
<script src="/js/pc/client/swiper-3.4.2.min.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="/libs/Swiper-master/dist/js/idangerous.swiper2.7.6.min.js"></script>
<![endif]-->
<script src="https://api.map.baidu.com/api?v=2.0&s=1&ak=M1ux3pKOl7XaGqeTfxhOK2dR"></script>
<script src="/libs/yzf/modules/yzf.tab.js"></script>
<script src="/common/js/baiduMap.js"></script>
<script src="/common/js/front.js"></script>
<script th:src="@{/lib/layui/layui.js}"></script>
<script src="/common/js/jquerysession.js"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(["form", "okGVerify", "okUtils", "okLayer", "jquery"], function () {
        var phone;
        let that;
        let form = layui.form;
        let $ = layui.jquery;
        let okGVerify = layui.okGVerify;
        let okUtils = layui.okUtils;
        let okLayer = layui.okLayer;

        var shuju;

        let regPhone = /^[1][0-9]{10}$/;
        /**手机号验证**/
        let setInter = '';
        /**定时器对象*/
        let second = 60;//设置时间
        /**
         * 初始化验证码
         */
        let verifyCode;

        $(".close").click(function () {
			$("#picCodeModal").css("display","none")
        })

		$("#nao").click(function () {
			$("#kao").css("display","none");
            $.session.remove('zhi');
        })

		$("section .sms-button-error").click(function () {
            if (!regPhone.test($("section input[name=fu_mobile]").val())) {
                layer.msg("输入的手机号格式不正确，请重新输入", {
                    time: 3000,
                    icon: 10
                });
            } else {
                $("#captchaImg").text("")
                $("#captchaImg").html("")
                $("#captchaImg1").text("")
                $("#captchaImg1").html("")
                verifyCode = new okGVerify("#captchaImg1");
                $("#picCodeModal").css("display","block");
                that = $("section .sms-button-error"),
                phone = $("section input[name=fu_mobile]").val();

            }
        })


        $("#huoqu").click(function () {
            if (!regPhone.test($("#phone").val())) {
                layer.msg("输入的手机号格式不正确，请重新输入", {
                    time: 3000,
                    icon: 10
                });
            } else {
                $("#captchaImg1").text("")
                $("#captchaImg1").html("")
                $("#captchaImg").text("")
                $("#captchaImg").html("")
                verifyCode = new okGVerify("#captchaImg");
                $(".diyi").css("left", "-400px")
                $(".dier").css("left", "0px")
                $("#haizhi").css("display", "")
                that = $("#huoqu"),
                phone = $("#phone").val();
            }
        })

        form.verify({
            fu_mobile: [
                regPhone,
                '输入的手机号格式不正确，请重新输入'
            ],
            captcha: function (val) {
                if (verifyCode.validate(val) != "true") {
                    return verifyCode.validate(val)
                } else {
                    $(".diyi").css("left", "0px")
                    $(".dier").css("left", "400px")
                    $("#haizhi").css("display", "")
                    $("#picCodeModal").css("display","none")
                    if (regPhone.test(phone)) {
                        if (!setInter) {
                            clearInterval(setInter);
                            that.text(second + "秒后获取");
                            setInter = setInterval(function () {
                                second--;
                                if (second < 1) {
                                    clearInterval(setInter);
                                    that.text("重新获取");
                                    setInter = "";
                                    second = 60;
                                } else {
                                    that.text(second + "秒后获取");
                                }
                            }, 1000);
                            $.ajax({
                                url: "/retAddress/duanxin",
                                type: "POST",
                                data: {"phone": phone},
                                dataType: "JSON",
                                success: function (data) {

                                }
                            })
                        }
                    }
                }
            }
        });


        /**
         * 表单提交
         */
        form.on("submit(logins3)", function (data) {
            var id = $("#id").attr("value");
            var phone = $("#username").val();
            if(phone != null || phone != "" || phone != undefined){
                data.field.fu_mobile = phone
            }
            data.field.rentalId = id;
            data.field.biaoshi = "true";
            $.ajax({
                url: "/retAddress/yuding",
                type: "POST",
                data: data.field,
                dataType: "JSON",
                success: function (data) {
                    if (data == "1") {
                        layer.msg("服务器错误", {
                            time: 3000,
                            icon: 10
                        });
                    }else if(data == "3"){
                        layer.msg("亲爱的用户,您已预定过此楼房", {
                            time: 3000,
                            icon: 10
                        });
                    }else{
                        window.location = "/retAddress/houseDetails?id="+id;
                        $.session.set("zhi", "ture");
                    }
                }
            })
        });



        /**
         * 表单提交
         */
        form.on("submit(logins2)", function (data) {
            $("#captchaImg").text("")
            $("#captchaImg").html("")
            verifyCode = new okGVerify("#captchaImg");
            var id = $("#id").attr("value");
            data.field.rentalId = id;
            data.field.biaoshi = "true";
            $.ajax({
                url: "/retAddress/adduser",
                type: "POST",
                data: data.field,
                dataType: "JSON",
                success: function (data) {
                    if (data == "1") {
                        layer.msg("服务器错误", {
                            time: 3000,
                            icon: 10
                        });
                    } else if (data == "2") {
                        layer.msg("验证码错误", {
                            time: 3000,
                            icon: 10
                        });
                    } else {
                        window.location = "/retAddress/houseDetails?id="+id;
                        $.session.set("zhi", "ture");
                    }
                }
            })
        });


        /**
         * 表单提交
         */
        form.on("submit(logins)", function (data) {
            $("#captchaImg").text("")
            $("#captchaImg").html("")
            verifyCode = new okGVerify("#captchaImg");
            var id = $("#id").attr("value");
            $.ajax({
                url: "/retAddress/adduser",
                type: "POST",
                data: data.field,
                dataType: "JSON",
                success: function (data) {
                    if (data == "1") {
                        layer.msg("服务器错误", {
                            time: 3000,
                            icon: 10
                        });
                    } else if (data == "2") {
                        layer.msg("验证码错误", {
                            time: 3000,
                            icon: 10
                        });
                    } else {
                        window.location = "/retAddress/houseDetails?id="+id;
                    }
                }
            })
        });

        /**
         * 表单提交
         */
        form.on("submit(logins1)", function (data) {
            if (!regPhone.test($("#fu_mobile").val())) {
                layer.msg("输入的手机号格式不正确，请重新输入", {
                    time: 3000,
                    icon: 10
                });
            } else {
                var id = $("#id").attr("value");
                $.ajax({
                    url: "/retAddress/denglogin",
                    type: "POST",
                    data: data.field,
                    dataType: "JSON",
                    success: function (data) {
                        if (data == "1") {
                            layer.msg("手机账号或密码错误", {
                                time: 3000,
                                icon: 10
                            });
                        } else {
                            window.location = "/retAddress/houseDetails?id="+id;
                        }
                    }
                })
            }
        });

        c();
        a();


        $('.btn-apt').click(function(){
            var log=$(this).parent().parent().parent().parent().find('#login_holder').find('a');
            if(log.text()=='注册/登录'){
                // userHandler.quickLogin();
                $("#login_holder a").click();
            }
        });
        $(document).on('click','.modal-backdrop',function(){
            $('#loginModal').hide();
            $("#quickLoginForm").removeAttr("data-url");
            $(this).remove();
            $('body').removeClass('modal-open');
            $(".diyi").css("left","0px")
            $(".dier").css("left","400px")
            $("#haizhi").css("display","")
            $("#captchaImg").text("")
            $("#captchaImg").html("")
            verifyCode = new okGVerify("#captchaImg");
        });

        //显示房源图片
        function test() {
            var ccc = [[${retImgList}]]
            var str = "<div class='swiper-wrapper'>";
            $.each(ccc,function (index,value){
                if(index == 0){
                    str+="<div class='swiper-slide btn-pic' style='cursor:pointer'><img src='"+this.imgPicture+"' width='100%'>" +
                        "</div>";
                }else{
                    str+="<div class='swiper-slide btn-pic' style='cursor:pointer'>"+
                        "<img class='lazy' data-original='"+this.imgPicture+"' src='"+this.imgPicture+"' width='100%'> </div>";
                }
            })
            str+="</div>";
            $("#tet").append(str)
        }

        //房源小图展示
        function xiakuan() {
            var ccc = [[${retImgList}]]
            var str = "<div class='swiper-wrapper'>";
            $.each(ccc,function (index,value){
                str+=" <div class='swiper-slide swiper-slide-active active-nav' style='width: 118px; margin-right: 10px;'>"+
                    "<img src='"+this.imgPicture+"' width='100%'>" +
                    "</div>";
            });
            str+="</div>";
            $("#xiakuan").append(str);
        }

        //单击房源图片查看详情图片
        function nhao(){
            var ccc = [[${retImgList}]];
            var str = "<div>";
            $.each(ccc,function (index,value){
                str+="<div class='pic-img' tableindex='-1' style='display: none;'>"+
                    " <img src='"+this.imgPicture+"' height='650px'>" +
                    " </div>"
            })
            str+="</div>";
            $("#nhao").append(str)
        }

        //猜你喜欢房源显示
        function recommendedContainer(){
            var ccc = [[${retRentalInformationCai}]];
            var str = " <div class='swiper-wrapper'>";
            $.each(ccc,function (index,value){
                str+="<div class='swiper-slide'> <a rel='nofollow' href="+basePath+'/retAddress/houseDetails?id='+this.ret_id+" target='_blank' class='img-wrap'>" +
                    " <img class='lazy' data-original='"+this.ret_picture+"' src='"+this.ret_picture+"'>" +
                    "</a>"+
                    "<div class='info'> <a rel='nofollow' href="+basePath+'/retAddress/houseDetails?id='+this.ret_id+" target='_blank' style='display: inline-block;'>" +
                    "<h3 class='title'><span>"+this.lease_out+"</span>-<span>"+this.huxing_type+""+this.ret_wei+"居</span></h3>" +
                    "</a><p class='price'><span class='text-orange'>"+this.money+"</span><span class='text-gray'>元/月</span></p>" +
                    " </div></div>"
            })
            str+="</div>";
            $("#recommendedContainer").append(str)
        }


        //导航栏
        function tiao(){
            var ccc = [[${retRentalInformationList}]];
            var str = " <ol class='breadcrumb'>";
            $.each(ccc,function (index,value){
                str+=" <li><a href='#'>租房网</a><span>></span></li>" +
                    "<li><a href='#'>"+this.ch_cityName+"租房</a><span>></span></li>"+
                    "<li><a href='#'>"+this.cityName+"租房</a><span>></span></li><li><a href='#'>"+this.lease_out+"</a><span>></span></li><li class='active'>当前房源</li>"
            })
            str+="</ol>";
            $("#tiao").append(str)
        }

        test();
        xiakuan();
        nhao();
        recommendedContainer();
        tiao();

        //房源展示图控制//
        var gallery_top=$('.gallery-top').find('.swiper-slide');
        gallery_top.find('img').on('load',function(){
            gallery_top.each(function(){
                var gallery_top_height=$(this).height();
                var gallery_top_img_height=$(this).find('img').height();
                $(this).find('img').css({
                    'position':'relative',
                    'top':-(gallery_top_img_height-gallery_top_height)/2+'px'
                })
            });
        })

        /*房源展示弹出层开始*/
        var pic_wrap=$('.pic-bounce .pic-show .pic-img');
        var pic_index=0;
        var pic_length=pic_wrap.length;
        $('.btn-pic').click(function(){
            $('.pic-bounce').fadeIn(300);
            pic_index=$(this).index();
            pic_wrap.eq(pic_index).show().siblings('.pic-img').hide();
        })
        $('.pic-bounce .btn-right').click(function(){
            if(pic_index<pic_length-1){
                pic_index++;
            }else{
                pic_index=0;
            }
            pic_wrap.eq(pic_index).show().siblings('.pic-img').hide();
        })
        $('.pic-bounce .btn-left').click(function(){
            if(pic_index>0){
                pic_index--;
            }else{
                pic_index=pic_length-1;
            }
            pic_wrap.eq(pic_index).show().siblings('.pic-img').hide();
        })
        $('.pic-bounce .close').click(function(){
            $('.pic-bounce').fadeOut(300);
        })
        /*房源展示弹出层结束*/
        //	判断浏览器是否为IE8及以下
        var lte_ie9;
        var ie_9=function(){
            var DEFAULT_VERSION = 9.0;
            var ua = navigator.userAgent.toLowerCase();
            var isIE = ua.indexOf("msie")>-1;
            var safariVersion;
            if(isIE){
                safariVersion =  ua.match(/msie ([\d.]+)/)[1];
            }
            if(safariVersion <= DEFAULT_VERSION ){
                lte_ie9=1;
            };
        };
        ie_9();

        if(lte_ie9!=1){
            var galleryTop = new Swiper('.gallery-top', {
                onSlideChangeStart: function() {
                    updateNavPosition();
                }
            })

            $('.gallery-top .swiper-button-prev,.slide-box .thumbs-prev').on('click', function(e) {
                e.preventDefault();
                if(galleryTop.activeIndex == 0) {
                    galleryTop.slideTo(galleryTop.slides.length - 1, 0);
                    return;
                }
                galleryTop.slidePrev(updateNavPosition(),0);
            })
            $('.gallery-top .swiper-button-next,.slide-box .thumbs-next').on('click', function(e) {
                e.preventDefault();
                if(galleryTop.activeIndex == galleryTop.slides.length - 1) {
                    galleryTop.slideTo(0, 0);
                    return
                }
                galleryTop.slideNext(updateNavPosition(),0);
            })

            var galleryThumbs = new Swiper('.gallery-thumbs', {
                visibilityFullFit: true,
                slidesPerView:5,
                spaceBetween: 10,
                onlyExternal: true,
                onClick: function() {
                    galleryTop.slideTo(galleryThumbs.clickedIndex,0);
                }
            })

            function updateNavPosition() {
                $('.gallery-thumbs .active-nav').removeClass('active-nav');
                var activeNav = $('.gallery-thumbs .swiper-slide').eq(galleryTop.activeIndex).addClass('active-nav');
                if(!activeNav.hasClass('swiper-slide-visible')) {
                    if(activeNav.index() > galleryThumbs.activeIndex) {
                        var thumbsPerNav = Math.floor(galleryThumbs.width / activeNav.width()) - 1;
                        galleryThumbs.slideTo(activeNav.index());
                    } else {
                        galleryThumbs.slideTo(activeNav.index());
                    }
                }
            }
        }else{
            var galleryTop = new Swiper('.gallery-top', {
                onSlideChangeStart: function() {
                    updateNavPosition();
                }
            })

            $('.gallery-top .swiper-button-prev,.slide-box .thumbs-prev').on('click', function(e) {
                e.preventDefault();
                if(galleryTop.activeIndex == 0) {
                    galleryTop.swipeTo(galleryTop.slides.length - 1, 0);
                    return;
                }
                galleryTop.swipePrev(updateNavPosition(),0);
            })
            $('.gallery-top .swiper-button-next,.slide-box .thumbs-next').on('click', function(e) {
                e.preventDefault();
                if(galleryTop.activeIndex == galleryTop.slides.length - 1) {
                    galleryTop.swipeTo(0, 0);
                    return
                }
                galleryTop.swipeNext(updateNavPosition(),0);
            })

            var galleryThumbs = new Swiper('.gallery-thumbs', {
                visibilityFullFit: true,
                slidesPerView:5,
                spaceBetween: 10,
                onlyExternal: true,
                onClick: function() {
                    galleryTop.swipeTo(galleryThumbs.clickedIndex,0);
                }
            })

            function updateNavPosition() {
                $('.gallery-thumbs .active-nav').removeClass('active-nav');
                var activeNav = $('.gallery-thumbs .swiper-slide').eq(galleryTop.activeIndex).addClass('active-nav');
                if(!activeNav.hasClass('swiper-slide-visible')) {
                    if(activeNav.index() > galleryThumbs.activeIndex) {
                        var thumbsPerNav = Math.floor(galleryThumbs.width / activeNav.width()) - 1;
                        galleryThumbs.swipeTo(activeNav.index());
                    } else {
                        galleryThumbs.swipeTo(activeNav.index());
                    }
                }
            }
        }
        $(".gallery-thumbs .swiper-slide").eq(0).addClass("active-nav");
    });


    var swiper = new Swiper('#recommendedContainer', {
        nextButton:'.icon-arrow-right-s',
        prevButton:'.icon-arrow-left-s',
        slidesPerView: 3,
        centeredSlides: false,
        paginationClickable: false,
        spaceBetween:20
    });

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var $body = $(document.body),
            $target   = $(e.target),
            lng = $body.attr("lng"),
            lat = $body.attr("lat"),
            href      = $target.attr("href"),
            key       = $target.attr("data-key"); // newly activated tab

        switch(key){
            case "交通":
                key = ['地铁', '公交'];
                break;
            case "餐饮":
                key = ['美食'];
                break;
            case "购物":
                key = ['购物'];
                break;
            case "教育":
                key = ['教育'];
                break;
        }


        mapEnv.init('mapContainer',lng,lat,key,'M1ux3pKOl7XaGqeTfxhOK2dR',function(data){
            //map label click;
            var onLabelClick = function(){
                var lng = $(this).attr('lng'),
                    lat = $(this).attr('lat'),
                    point = new BMap.Point(lng,lat),
                    name = $(this).attr('name'),
                    addr = $(this).attr('address');


                mapEnv.openInfoWindow(addr,point,name);
            };


            if(data){
                var html = '',
                    points = [],
                    ops,
                    marker;

                mapEnv.map.clearOverlays();

                var prop_point = new BMap.Point(lng,lat);
                var prop_ops = {
                    point:prop_point,
                    className:"map-location",
                    offsetX:"12.5",
                    offsetY:"40"
                };
                var pmarker = new MyLabel(prop_ops);
                mapEnv.map.addOverlay(pmarker);

                for(var i=0,len=data.length; i<len; i++){
                    var value = data[i],
                        key = i+1,
                        point = new BMap.Point(value['location'].lng,value['location'].lat);
                    if(value['detail_info'].type=="life"){
                        continue;
                    }else{
                        html += '<li onclick="mapEnv.onListClick(this);" data-num="'+key+'" address="'+value.address+'" lng="'+value['location'].lng+'" lat="'+value['location'].lat+'" name="'+value.name+'"><span class="order">'+key+'</span><span class="name">' + value['name'] + '</span><span class="distance">'+value['detail_info'].distance+'米</span></li>';
                    }

                    ops = {
                        point:point,
                        className:"map-mark"+key,
                        offsetX:"10.5",
                        offsetY:"33",
                        num:key
                    };
                    marker = new MyLabel(ops);
                    mapEnv.map.addOverlay(marker);
                    marker._div.setAttribute('lng',value.location.lng);
                    marker._div.setAttribute('lat',value.location.lat);
                    marker._div.setAttribute('name',value.name);
                    marker._div.setAttribute('address',value.address);
                    marker._div.onclick = onLabelClick;
                    points.push(point);
                    if(i === 20){
                        break;
                    }
                }

            }

            //设置中心点；
            var view = mapEnv.map.getViewport(points, {
                enableAnimation: true,
                margins: [10, 10, 10, 10]
            });
            mapEnv.map.centerAndZoom(view.center, view.zoom);
            $(href).html(html);
        });
    });
    $("#transportTab").click();

    $(".label-group .fee").on("click", function() {
        dialog({
            title: '车费报销说明',
            width: 340,
            content: '<div style="line-height: 25px;">预约后在15日内到公寓看房并签约，凭看房当日打车或乘坐公共交通工具的发票、车票或支付凭证，可报销最多50元车费。该费用由公寓管家在签约时直接从首月租金中减免或通过转账等方式另行支付。请留意房源页的“报销车费”标签，没有该标签的公寓无此优惠。<div>'
        }).showModal();
    });

    function c() {
        var user = $("#username").val();
        var t = $("#login_holder");
        user ? $(".test").css("display","block") : $(".test").css("display","none")
        user ? $(".yinchang").css("display","none") : $(".yinchang").css("display","block")
        user ? t.html('<div class="drop-wrap"><a href="/retPersonage/personage"><span class="icon_user"></span><span>' + user + '</span></a><ul class="arrow-top nav-down-wrap"><li><a href="/retPersonage/personage" target="_blank">个人中心</a></li><li><a href="/retAddress/logout" data-toggle="logout">退出登录</a></li></ul>') : t.html('<a href="#loginModal" rel="noffolow" data-toggle="modal" data-target="#loginModal">注册/登录</a>')
    }

    function  a() {
		var zhi = $.session.get('zhi');
        zhi ? $("#kao").css("display","block") : $("#kao").css("display","none");
    }
</script>
<div id="kao" style=" display: none">
<div tabindex="0" style="opacity: 0.9; background: rgb(0, 0, 0); position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; user-select: none; z-index: 1024;" class="ui-popup-backdrop"></div>
<div tabindex="-1" class="ui-popup ui-popup-modal ui-popup-show" role="dialog" style="position: absolute; outline: 0px; left: 500px; top: 133px; z-index: 1024;">
	<div i="dialog" class="ui-dialog"><div class="ui-dialog-arrow-a"></div>
		<div class="ui-dialog-arrow-b"></div>
		<table class="ui-dialog-grid">
			<tbody>
			<tr>
				<td i="header" class="ui-dialog-header">
					<button i="close" class="ui-dialog-close" title="cancel" id="nao">×</button>
					<div i="title" class="ui-dialog-title" id="title:1593248428661">预约成功</div>
				</td>
			</tr>
			<tr>
				<td i="body" class="ui-dialog-body" style="padding: 0px;">
					<div i="content" class="ui-dialog-content" id="content:1593248428661" style="width: 550px; height: 350px;">
						<div class="t-c wx-wrap">
							<div><img src="/img/showqrcode" width="144" height="144" /></div>
							<div class="wx-info">
								<p>打开微信扫一扫，关注“租房网”微信公众号</p>
								<p>实时接收预约通知，查看联系方式，一键导航</span></p>
							</div>
						</div>
						<!--<span class="ui-dialog-loading">Loading..</span>-->
					</div>
				</td>
			</tr>
			</tbody>
		</table>
	</div>
</div>
<div tabindex="0" style=""></div>
</div>
</body>
</html>